import React, { ReactNode, useEffect, useMemo, useState } from 'react';
import { Box, Stack, Grid } from '@material-ui/core';
import { VenderBox } from '@/systems';
import { RenderCards } from '@/pages/dashboard/render-card';
import { RenderTabs } from '@/pages/dashboard/render-tabs';
import { Charts } from '@/pages/dashboard/charts';
import { VendorList } from '@/pages/dashboard/list';
import { getProductAmountInfo } from '@/apis';
import { useRequest } from '@umijs/hooks';

interface DashboardContextProps {
  amountInfo: { productName: string; infos: Infos[] }[];
  currentTab: number;
  updateTab?: React.Dispatch<React.SetStateAction<number>>;
}

export interface Infos {
  title: ReactNode;
  count: number;
  iconUrl: string;
  unit: string;
}

export interface AmountInfo {
  productName: string;
  infos: Infos[];
}

export const DashboardContext = React.createContext<DashboardContextProps>({
  amountInfo: [],
  currentTab: 0,
});

export const getCardData = (data = []) => {
  return useMemo(() => {
    if (!data?.length) return [];

    return data.map((ret) => ({
      productName: ret.productName,
      infos: [
        {
          title: '供应商数量',
          count: ret.sellerNum,
          unit: '家',
          iconUrl: ret.iconUrl,
        },
        {
          title: '待审批总额',
          count: ret.approveAmount,
          unit: '元',
          iconUrl: ret.iconUrl,
        },
        {
          title: '待付款总额',
          count: ret.repaymentAmount,
          unit: '元',
          iconUrl: ret.iconUrl,
        },
        {
          title: '已回款总额',
          count: ret.hadLoanAmount,
          unit: '元',
          iconUrl: ret.iconUrl,
        },
        {
          title: '签约供应商',
          count: ret.loanNum,
          unit: '家',
          iconUrl: ret.iconUrl,
        },
        {
          title: '逾期付款总额',
          count: ret.overdueAmount,
          unit: '元',
          iconUrl: ret.iconUrl,
        },
        {
          title: '审批拒绝总额',
          count: ret.pendingRefuseAmount,
          unit: '元',
          iconUrl: ret.iconUrl,
        },
        {
          title: '待审批笔数',
          count: ret.pendingCount,
          unit: '元',
          iconUrl: ret.iconUrl,
        },
      ],
    }));
  }, [data]);
};

export default () => {
  const [currentTab, setCurrentTab] = useState(0);
  const { error, data, loading, run } = useRequest(getProductAmountInfo, {
    manual: true,
  });

  useEffect(() => {
    run();
  }, []);

  const amountInfo = getCardData(data);

  return (
    <DashboardContext.Provider
      value={{
        amountInfo,
        currentTab,
        updateTab: setCurrentTab,
      }}
    >
      <VenderBox>
        <Box
          sx={{
            p: 2,
          }}
        >
          <RenderTabs />
        </Box>
      </VenderBox>

      <Box
        sx={{
          marginTop: 5,
        }}
      >
        <RenderCards tab={currentTab} infos={amountInfo[currentTab]?.infos} />
      </Box>

      <Grid
        container
        justifyContent={'space-between'}
        sx={{
          mt: 6,
        }}
      >
        <Grid item xs={6}>
          <VenderBox>
            <Charts />
          </VenderBox>
        </Grid>
        <Grid item xs={5}>
          <Box
            sx={{
              height: '100%',
              boxShadow: 2,
              borderRadius: '5px',
            }}
          >
            <VendorList />
          </Box>
        </Grid>
      </Grid>
    </DashboardContext.Provider>
  );
};
